<template>
  <div class="indexContentContainer">
    <div class="menu">
      <el-menu :default-active="defaultActive" :default-openeds="openeds" @select="handleSelect" @open="handleOpen"
        @close="handleClose" :collapse="false">
        <el-submenu v-for="item in menuList" :index="item.value" :key="item.value">
          <template slot="title">
            <span>
              <img class="menuIcon" :src="
                        currentFatherTab == item.value
                          ? menuIconActiveParams[currentFatherTab]
                          : menuIconNormalParams[item.value]
                      " />
              {{ item.title }}
            </span>
          </template>
          <el-menu-item v-for="childrenItem in item.children" :index="childrenItem.value"
            :key="childrenItem.value">{{ childrenItem.title }}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="content">
      <careerTable v-if="currentTab=='1-1'"></careerTable>
      <caseTable v-else-if="currentTab=='1-2'"></caseTable>
      <videoTableVue v-else-if="currentTab=='1-3'"></videoTableVue>
      <presentationTable v-else-if="currentTab=='1-4'"></presentationTable>
      <resumeTemplateTable v-else-if="currentTab=='1-5'"></resumeTemplateTable>
    </div>
  </div>
</template>

<script>
import careerTable from "./components/careerTable.vue";
import caseTable from "./components/caseTable.vue";
import resumeTemplateTable from "./components/resumeTemplateTable.vue";
import presentationTable from "./components/presentationTable.vue";
import videoTableVue from "./components/videoTable.vue";
export default {
  name: "indexContent",
  components: {
    presentationTable,
    caseTable,
    careerTable,
    videoTableVue,
    resumeTemplateTable,
  },
  data() {
    return {
      currentTab: "1-1",
      currentFatherTab: "1",
      defaultActive: "1-1",
      openeds: ["1"],
      menuList: [
        {
          title: "我的收藏",
          value: "1",
          children: [
            { title: "职业", value: "1-1" },
            { title: "案例", value: "1-2" },
            { title: "视频", value: "1-3" },
            { title: "课件", value: "1-4" },
            { title: "简历模板", value: "1-5" },
          ],
        },
      ],
      menuIconList: [
        require("../../../assets/detail/menuIcon/train@2x.png"),
        require("../../../assets/detail/menuIcon/trainSelected@2x.png"),
        require("../../../assets/detail/menuIcon/sal@2x.png"),
        require("../../../assets/detail/menuIcon/salSelected@2x.png"),
        require("../../../assets/detail/menuIcon/recruit@2x.png"),
        require("../../../assets/detail/menuIcon/recruitSelected@2x.png"),
        require("../../../assets/detail/menuIcon/position@2x.png"),
        require("../../../assets/detail/menuIcon/positionSelected@2x.png"),
      ],
      menuIconActiveParams: {
        1: require("../../../assets/detail/menuIcon/trainSelected@2x.png"),
        41: require("../../../assets/detail/menuIcon/salSelected@2x.png"),
        74: require("../../../assets/detail/menuIcon/recruitSelected@2x.png"),
        34: require("../../../assets/detail/menuIcon/positionSelected@2x.png"),
      },
      menuIconNormalParams: {
        1: require("../../../assets/detail/menuIcon/train@2x.png"),
        41: require("../../../assets/detail/menuIcon/sal@2x.png"),
        74: require("../../../assets/detail/menuIcon/recruit@2x.png"),
        34: require("../../../assets/detail/menuIcon/position@2x.png"),
      },
    };
  },
  methods: {
    handleSelect(values) {
      this.currentTab = values;
    },
    handleOpen(val) {},
    handleClose(val) {},
  },
};
</script>

<style lang="scss" scoped>
.indexContentContainer {
  display: flex;
  margin-top: 14px;
  margin-right: 14px;
  width: 100%;
  .menu {
    width: 173px;
    margin-right: 14px;
    border-radius: 8px 8px 0 0;
    height: 100%;
    flex-shrink: 0;
    background-color: white;
  }
  .content {
    display: flex;
    min-width: 900px;
    // height: 500px;
    flex: 1;
    background-color: white;
    border-radius: 10px 10px 0 0;
  }
}
::v-deep .el-menu {
  width: 175px;
  border-right: 0px;
  background: #f5f5f5;
}
::v-deep .el-menu-item {
  padding-left: 60px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
::v-deep .el-submenu__title {
  height: 41px;
  font-size: 16px;
  line-height: 41px;
  padding-left: 16px !important;
  color: #999999;
  background: #fff;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-menu-item.is-active {
  color: #0b6eff;
}
::v-deep .el-submenu.is-active > .el-submenu__title {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #0b6eff;
  border-radius: 8px;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #0b6eff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
  }
  .el-icon-arrow-down:before {
    color: #fff;
  }
}
.menuIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 3px;
  line-height: 16px;
}
</style>